<template>
  <div class="monitor">
    monitor{{ viewMap[$route.params.id] }} {{solutionName}}
    <div
      class="monitor-item"
      v-for="(item, index) in useList(list)"
      :key="item.id + index"
      :style="[
        getComputedStyle(item),
        { transform: `scale(${scaleW}, ${scaleH})` },
      ]"
    >
      <component
        v-if="!item.UPDATE"
        :is="`lcd-sider-${item.key}`"
        :key="`lcd-sider-${item.key}~${item.id}`"
        :id="item.id"
        :prop="useProp(item.id)"
        :global="useGlobal(item.id)"
        @mapChange="handleMapChange"
      ></component>
    </div>
    <view-switch />
  </div>
</template>

<script>
import ViewSwitch from './components/ViewSwitch.vue'

import { createNamespacedHelpers } from 'vuex'

const { mapState: _mapState } = createNamespacedHelpers('monitor')

import { getConfiguredViewsDetailInfo } from '@/api/home.js'

import view from '@/mixins/viewer'
import route from '@/mixins/router'

export default {
  name: 'Monitor',
  mixins: [view, route],
  components: {
    ViewSwitch,
  },
  data() {
    return {
      width: 1920,
      height: 1080,
      list: [],
      graph: {}
    }
  },
  methods: {
    // 过滤list
    useList(list) {
      const keys = ['bg1'];
      return list.map(m => {
        if(keys.includes(m.key)) {
          m.prop.title = this.solutionName
        }

        return m;
      });
    },
    transformStyle() {
      const { clientWidth, clientHeight } = document.documentElement
      this.scaleW = clientWidth / this.width
      this.scaleH = clientHeight / this.height
    },
    handleConfigure(viewId) {
      getConfiguredViewsDetailInfo({
        viewId,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.code == '0') {
          if (res.data.viewValue) {
            const { meta, width, height, graph } = JSON.parse(res.data.viewValue)
            console.log('meta', meta, 'width', width, 'height', height, 'graph', graph)
            this.width = width
            this.height = height
            this.graph = graph
            this.list = Object.entries(meta).map(([id, value]) => {
              return {
                id: id,
                ...value,
              }
            })
          } else {
            this.list = []
          }
        }
      })
    },
    handleMapChange(data) {
      this.list = this.list.map((m) => {
        if (this.graph?.map1.includes(m.key)) {
          return {
            ...m,
            global: [
              {
                key: 'mapLevel',
                value: data.mapLevel,
                isWork: true,
              },
              {
                key: 'mapCode',
                value: data.mapCode,
                isWork: true,
              },
            ],
          }
        } else {
          return m
        }
      })
    },
  },
  computed: {
    ..._mapState(['viewMap', 'solutionName']),
  },
  watch: {
    viewMap: {
      deep: true,
      immediate: true,
      handler(val, oldVal) {
        if (val[this.$route.params.id]) {
          this.handleConfigure(val[this.$route.params.id])
        }
      },
    },
    '$route.params.id': {
      handler(val, oldVal) {
        if (this.viewMap[val]) this.handleConfigure(this.viewMap[val])
      },
    },
  },
  mounted() {
    this.transformStyle()
    window.addEventListener('resize', this.transformStyle)
  },
  beforeDestroy() {
    removeEventListener('resize', this.transformStyle)
  },
}
</script>

<style lang="less" scoped>
.monitor {
  position: relative;
  width: 100%;
  height: 100%;
  .monitor-item {
    position: absolute;
    overflow: hidden;
    transform-origin: 0 0;
  }
}
</style>
